﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Demo</title>
    <!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
    @*    <script src="~/scripts/jquery-3.4.1.min.js"></script> *@
    <link href="~/libs/layui-v2.5.6/layui/css/layui.css" rel="stylesheet" />
    <script src="~/libs/layui-v2.9.17/layui/layui.js"></script>
    <script src="~/libs/jquery/jquery.js"></script>
    @*     <script src="~/layui-v2.5.6/layui/layui.js"></script> *@
</head>
<body>
    <form class="layui-form layui-row layui-col-space16">
        <div class="layui-form-item">
            <div class="layui-col-md2">
                <div class="layui-input-inline layui-input-wrap">
                    <input type="text" name="vendorcode" value="" placeholder="请输入供应商编码" class="layui-input " lay-affix="clear" id="vendorcode">
                </div>
            </div>
            <div class="layui-col-md2">
                <div class="layui-input-inline layui-input-wrap">
                    <input type="text" name="vendorname" value="" placeholder="请输入供应商名称" class="layui-input" lay-affix="clear" id="vendorname">
                </div>
            </div>
            <div class="layui-col-md2">
                <div class="layui-input-inline layui-input-wrap">
                    <input type="text" name="vendornick" placeholder="请输入供应商简称" lay-affix="clear" class="layui-input" id="vendorNick">
                </div>
            </div>
            <div class="layui-col-md2">
                <div class="layui-input-inline layui-input-wrap">
                    <input type="text" name="vendoren" placeholder="请输入供应商英文名称" lay-affix="clear" class="layui-input" id="vendoren">
                </div>
            </div>
            <div class="layui-btn-container layui-col-xs12">
                <button class="layui-btn layui-bg-blue" lay-filter="demo-table-search">搜索</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                <button type="button" class="layui-btn layui-bg-blue" lay-on="test-page-custom">添加</button>
            </div>
        </div>
    </form>
    <table class="layui-hide" id="demo" lay-filter="test">
    </table>
    <script src="~/libs/layui-v2.5.6/layui/layui.js"></script>
    <script>
        layui.use(['table', 'form', 'layer', 'dropdown', 'jquery'], function () {
            var table = layui.table;
            var form = layui.form;
            var dropdown = layui.dropdown;
            var layer = layui.layer
            var datas = [];
            const $ = layui.$;
            // 创建表格实例
            // 渲染
            var inst = table.render({
                elem: '#demo',
                url: '/ChuBoWen/GetMdVendorList',
                cols: [[
                    { type: 'checkbox', fixed: 'left', },
                    { field: 'vendorCode', width: 200, title: '供应商编码', sort: true },
                    { field: 'vendorName', width: 250, title: '供应商名称' },
                    { field: 'vendorNick', width: 150, title: '供应商简称', },
                    { field: 'vendorEn', width: 150, title: '供应商英文名称' },
                    { field: 'vendorScore', width: 150, title: '供应商评分', sort: true },
                    { field: 'tel', width: 150, title: '供应商电话' },
                    { field: 'remark', width: 150, title: '供应商备注' },
                ]],
                page: {
                    limit: 10,
                    limits: [10, 20, 30, 40, 50],
                    height: 520,
                    prev: '上一页',
                    next: '下一页',
                    first: '首页',
                    last: '尾页'
                },
                request: {//分页请求参数
                    pageName: 'pageIndex',
                    limitName: 'pageSize'
                },
                parseData: function (res) {//获取数据
                    return {
                        "code": res.code, //解析接口状态
                        "count": res.data.totalCount, //解析数据长度
                        "data": res.data.pageList//解析数据列表

                    };
                },
                toolbar: '#toolbarDemo',
            });
            // 搜索提交
            form.on('submit(demo-table-search)', function (data) {
                var field = data.field; // 获得表单字段
                // 执行搜索重载
                table.reload('demo', {
                    page: {
                        curr: 1 // 重新从第 1 页开始
                    },
                    where: field // 搜索的字段
                });
                layer.msg('搜索成功');
                return false; // 阻止默认 form 跳转
            });

            // 工具栏事件 删除、修改
            table.on('toolbar(test)', function (obj) {
                console.log(obj);
                var id = obj.config.id;
                var checkStatus = table.checkStatus(id);
                var othis = lay(this);
                var data = checkStatus.data;
                console.log(checkStatus)
            });
            // 复选框点击事件
            table.on('checkbox(test)', function (obj) {
                console.log(obj.data);
                //向父页面传值;

            });
        });
    </script>
</body>
</html>